import React, {Component} from 'react';
import {Motion, spring} from 'react-motion';
import './loading.scss';

class Loading extends Component {
  constructor (props) {
    super(props);
    this.state = {
      show: false
    };
  }
  componentDidMount () {
    this.setState({show: true});
  }
  // 锁定滚动
  // disableScroll () {
  //   const documentBody = document.body;
  //   if (documentBody) {
  //     documentBody.style.setProperty('overlow', 'hidden');
  //   }
  // }
  // 允许滚动
  // enableScroll () {
  //   const documentBody = document.body;
  //   if (documentBody) {
  //     documentBody.style.removeProperty('overflow');
  //   }
  // }
  fnHide () {
    this.setState({show: false});
  }
  fnRest = () => {
    if (!this.state.show) {
      console.log('loading end');
      this.props.close();
    }
  }
  render () {
    return (
      <Motion style={{opacity: spring(this.state.show ? 1 : 0)}} onRest={this.fnRest}>
        {
          ({opacity}) => (
            <div className="pa-loading" style={{opacity}}>
              <div className="content">
                <div className="loading-ui"></div>
                <div className="loading-text">加载中</div>
              </div>
              <div className="pa-mask"></div>
            </div>
          )
        }
      </Motion>
    )
  }
}

export default Loading;